<template>
  <div class="home">
    <div class="swiper">
      <template>
        <div class="recommendPage">
          <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide>
              <img class="w-100 h-100" src="../assets/images/swiper1.jpeg" alt="">
            </swiper-slide>
            <swiper-slide>
              <img class="w-100 h-100" src="../assets/images/swiper2.jpeg" alt="">
            </swiper-slide>
            <swiper-slide>
              <img class="w-100 h-100" src="../assets/images/swiper3.jpeg" alt="">
            </swiper-slide>
            <div class="swiper-pagination pagination-home text-right pr-3" slot="pagination"></div>
          </swiper>
        </div>
      </template>
    </div>
    <!-- end of swiper -->

    <div class="navicon mt-3 pt-3 bg-white text-center">
      <div class="d-flex flex-wrap">
        <div class="icon-item mb-3" v-for="n in 10" :key=n>
          <i class="sprite sprite-news"></i>
          <div class="py-2">新人专区</div>
        </div>
      </div>
      <div class="py-2 border-bottom bg-light">
        <i class="sprite sprite-arrow"></i>
        <span class="ml-1">收起</span>
      </div>
    </div>
    <!-- end of nav -->
    <m-list-card title="新闻资讯" icon='menu1' :categories='newsList'>
      <!-- #插槽名='自定义数据名' -->
      <!-- 具名插槽，v-slot: +插槽名+ ="自定义数据名"，子组件所传参数都是其属性 -->
      <template #items="{category}">
        <router-link tag='div' :to="`/article/${news._id}`" v-for="(news,i) in category.newsList" :key='i'
          class="pt-3 d-flex">
          <span class="text-blue">[{{news.categoryName}}]</span>
          <span class="px-1"> | </span>
          <span class="flex-1 text-ellipsis pr-3">{{news.title}}</span>
          <span class="text-gray">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>

    <m-list-card title="英雄分类" icon='card-hero' :categories='heroesList'>
      <!-- #插槽名='自定义数据名' -->
      <!-- 具名插槽，v-slot: +插槽名+ ="自定义数据名"，子组件所传参数都是其属性 -->
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem">
          <router-link :to="`/hero/${hero._id}`" tag="div" v-for="(hero,i) in category.heroesList" :key='i' class="p-2 text-center" style="width:20%">
            <img :src="hero.avatar" alt="" class="w-100">
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>

    <m-card title="精彩视频" icon='card-hero'></m-card>
    <m-card title="英雄分类" icon='card-hero'></m-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  // npm i dayjs
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
      },
      newsList: [],
      heroesList: [],
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  methods: {
    async fetchNewsList() {
      const res = await this.$http.get("/news/list");
      this.newsList = res.data;
    },
    async fetchHeroesList() {
      const res = await this.$http.get("/heroes/list");
      this.heroesList = res.data;
    },
  },
  created() {
    this.fetchNewsList();
    this.fetchHeroesList();
  },
};
</script>

<style lang='scss' >
.recommendPage .swiper-container {
  position: relative;
  width: 100%;
  // height: 200px;
  background: pink;
}
.recommendPage .swiper-container .swiper-slide {
  width: 100%;
  // line-height: 200px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
  display: flex;
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: white;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: skyblue;
  opacity: 1;
}
</style>